<template>
    <div class="express_dispatch">
        <div style="padding: 26px;">
            <lar-table
                    model="express.order"
                    canAdd="canAdd"
                    action="base.table"
                    class="border"
                    @handelButton="handelButton">
                <span slot="orderSearchBu" style="margin: 0 10px" v-if="isShowButton">
                    <el-button type="warning" size="mini" @click="dialogVisible = true">微特派补单</el-button>
                </span>
                <div slot="orderSearch" class="dispatch-warning-slot" slot-scope="data">
                    <span style="font-size: 16px;padding-right: 20px">搜索结果</span>
                    <span style="font-size: 13px;padding-right: 20px">共 <span style="color: #009688">{{data.data.totalNum}}</span> 条数据符合条件</span>
                </div>
            </lar-table>
            <el-dialog
                    :title="dialogTitle"
                    :visible.sync="dialogVisible"
                    :center="true"
                    :close-on-click-modal="false"
                    width="800px">
                <div v-if="!isShow">
                    <el-row style="margin: 20px 0">
                        <el-col :span="4" style="line-height: 42px;text-align: right;padding-right: 10px;font-size: 16px">三方单号:</el-col>
                        <el-col :span="18"><el-input type="text" v-model="searchOrderNum" placeholder="请准确输入要查询的运单号"></el-input></el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer" v-if="!isShow">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="searchOrder">确 定</el-button>
                </div>
                <div v-if="isShow">
                    <el-row style="margin: 20px 0;font-size: 16px;line-height: 40px;">
                        <el-col :span="24">
                            <el-col :span="6" style="text-align: right;padding-right: 10px">收件人姓名:</el-col>
                            <el-col :span="18">{{orderData.delivery_name}}</el-col>
                        </el-col>
                        <el-col :span="24">
                            <el-col :span="6" style="text-align: right;padding-right: 10px">收件人地址:</el-col>
                            <el-col :span="18"><el-input style="width: 500px;" type="text" v-model="orderData.delivery_address"></el-input></el-col>
                        </el-col>
                       <el-col :span="24">
                           <el-col :span="6" style="text-align: right;padding-right: 10px">收件人电话:</el-col>
                           <el-col :span="18">{{orderData.delivery_phone}}</el-col>
                       </el-col>
                        <el-col :span="24">
                            <el-col :span="6" style="text-align: right;padding-right: 10px">物品重量:</el-col>
                            <el-col :span="18">{{orderData.weight}}kg</el-col>
                        </el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer" v-if="isShow">
                    <el-button @click="isShow = false">取 消</el-button>
                    <el-button type="primary" @click="toOrder">下 单</el-button>
                </div>
            </el-dialog>
        </div>
    </div>

</template>
<script>
    import {manyHander} from '../../../../init/handerButton'

    export default {
        props: {
            navList: {
                type: Object | Array,
                default: () => {
                    return []
                }
            }
        },
        mixins:[manyHander],
        components: {},
        data() {
            return {
                dialogVisible: false,
                searchOrderNum: '',
                orderData: {},
                isShow:false,
                isShowButton: false,
                dialogTitle: '运单搜索'
            }
        },
        watch: {
            dialogVisible: function (val) {
                this.isShow = false;
                this.dialogTitle = '运单搜索';
                this.orderData = {};
                this.searchOrderNum = '';
            }
        },
        mounted() {
            if (localStorage.getItem('cityId') == '2') {
                this.isShowButton = true;
            }
            let data = {
                // orderStatus: {
                //     value: this.current,
                //     searchModel: "equal"
                // }
            };
            this.$store.commit('pipe', {'value': data, 'name': 'express.order.table'});
        },
        methods: {
            searchOrder() {
                if (!this.searchOrderNum) {
                    this.$message.error('请输入正确的三方单号');
                    return;
                }
                this.$http.get('express/fixOrder/?id=' + this.searchOrderNum + '&status=false')
                    .then((response) => {
                        console.info('response',response.data.data);
                        if (response.data.data) {
                            this.isShow = true;
                            this.dialogTitle = '下单';
                            this.orderData = response.data.data;
                        } else {
                            this.$message.error('没有查询到运单');
                        }

                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            toOrder() {
                let params = {
                    delivery_address:this.orderData.delivery_address
                };
                this.$http.get('express/fixOrder/?id=' + this.searchOrderNum + '&status=insert',{params:params})
                    .then((response) => {
                        this.$message.success('下单成功');
                        this.searchOrderNum = '';
                        this.isShow = false;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }
        }
    }
</script>
<style lang="less">
    .express_dispatch {
        .dispatch-warning-slot{
            padding: 0 0 20px 0;
        }
        .el-badge__content.is-fixed {
            right: 2px !important;
        }
        .el-radio-button__inner {
            padding: 12px 25px;
        }
        .lar-table {
            margin-top: 0;
        }
        .el-tabs__header {
            margin-bottom: 5px;
        }
        .el-tabs__nav-wrap {
            padding-left: 10px;
        }
    }
</style>
<style lang="less" scoped>
    .express_dispatch{

    }
</style>

